<template>
    <a-layout style="min-height: 100vh">
        <a-layout :style="{
            backgroundImage: 'url(' + backGroundImg + ')',
            backgroundRepeat: 'no-repeat', backgroundSize: '100% 400px'
        }" style="background-color: #fff;">

            <a-layout-header style="background: transparent; padding: 0; margin-bottom: 20px;">
                <div style="display: flex;">
                    <div>
                        <img src="@/assets/logo-no-background.png" style="height: 60px;" @click="$router.push('/homepage' + '?randomId=' + Math.random())" />
                    </div>
                    <div style="margin-left: auto; margin-right: 10px">
                        <a-dropdown>
                            <a>
                                <img src="@/assets/user.png" style="height: 40px">
                            </a>
                            <template #overlay>
                                <a-menu @click="onMenuClick">
                                    <a-menu-item key="name">
                                        登录为
                                        <strong>{{ $store.state.username }}</strong>
                                    </a-menu-item>
                                    <a-menu-divider />
                                    <a-menu-item key="settings">
                                        <homepage ref="homep" />
                                        <strong>设置</strong>
                                    </a-menu-item>
                                    <a-menu-divider />
                                    <a-menu-item key="favorite">
                                        <strong>收藏</strong>
                                    </a-menu-item>
                                    <a-menu-divider />
                                    <a-menu-item key="interest">
                                        <strong>关注列表</strong>
                                    </a-menu-item>
                                    <a-menu-divider />
                                    <a-menu-item key="logout">
                                        <strong>退出登录</strong>
                                    </a-menu-item>
                                </a-menu>
                            </template>
                        </a-dropdown>
                    </div>
                </div>
                <hr class="custom-divider" />
            </a-layout-header>
            <a-layout-content>
                <div :style="{
                    padding: '0px',
                    background: 'transparent',
                    minHeight: '360px',
                    margin: '0 0',
                }">
                    <keep-alive>
                        <router-view v-if="$route.meta.keepAlive"> </router-view>
                    </keep-alive>
                        <router-view v-if="!$route.meta.keepAlive"></router-view>
                </div>
            </a-layout-content>
            <a-layout-footer style="background: #000; text-align: center">
                <p style="color:#fff">©{{ new Date().getFullYear() }} {{ systemTitle }}</p>
                <p style="color:#fff"><a
                        @click.prevent="$router.push('/about')">关于</a>&nbsp;|&nbsp;<a>开发团队</a>&nbsp;|&nbsp;<a
                        href="https://gitee.com/shenyang-theone/theone-recsys">了解更多</a></p>
            </a-layout-footer>

        </a-layout>

    </a-layout>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue'
import { createFromIconfontCN, DownOutlined, HomeOutlined } from '@ant-design/icons-vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { logout as logout_request } from '@/api/post/logout'
import { icon_url } from '@/util/iconfont'
import homepage from "./homepage.vue";
import dom_map from '@/constant/dom_map'
const IconFont = createFromIconfontCN({
    scriptUrl: icon_url, //图标,随时更新
})
/**
 * 从路由表递归生成目录
 * @type {{template: string, components: {IconFont: FunctionalComponent<IconFontProps>}, name: string, props: {menuInfo: {default: (function(): {}), type: ObjectConstructor}}}}
 */
const SubMenu = {
    name: 'SubMenu',
    props: {
        menuInfo: {
            type: Object,
            default: () => ({}),
        },
    },
    template: `
        <template>
            <template
                v-if="
                menuInfo.children.filter((i) => !i.meta.hidden && i.meta.role.indexOf($store.state.role) >= 0).length >
                0
            "
            >
                <a-sub-menu :key="menuInfo.path">
                    <template #icon>
                        <icon-font :type="menuInfo.meta.icon" />
                    </template>
                    <template #title>{{ menuInfo.meta.title }}</template>
                    <template
                        v-for="item in menuInfo.children.filter(
                        (i) => !i.meta.hidden && i.meta.role.indexOf($store.state.role) >= 0
                    )"
                        :key="item.path"
                    >
                        <template v-if="!item.children">
                            <a-menu-item :key="item.path">
                                <template #icon>
                                    <icon-font :type="item.meta.icon" />
                                </template>
                                {{ item.meta.title }}
                            </a-menu-item>
                        </template>
                        <template v-else>
                            <sub-menu :menu-info="item" :key="item.path" />
                        </template>
                    </template>
                </a-sub-menu>
            </template>
            <template v-else>
                <a-menu-item :key="menuInfo.path">
                    <template #icon>
                        <icon-font :type="menuInfo.meta.icon" />
                    </template>
                    {{ menuInfo.meta.title }}
                </a-menu-item>
            </template>
        </template>
    `,
    components: {
        IconFont,
    },
}
export default defineComponent({
    components: {
        DownOutlined,
        IconFont,
        HomeOutlined,
        'sub-menu': SubMenu,
    },
    setup() {
        const store = useStore()
        const router = useRouter()
        const $route = useRouter()
        const homep = ref(null);
        onMounted(async () => {
            await updateUserInfo()
            state.menuList = router.options.routes
                .find((i) => i.name === 'layout')
                .children.filter((i) => !i.meta.hidden && i.meta.role.indexOf(store.state.role) >= 0)
            state.rootSubmenuKeys = state.menuList.map((i) => {
                return i.path
            })
        })
        const updateUserInfo = () => {
            store.dispatch('UPDATE_USER_INFO')
        }
        const onMenuClick = ({ key }) => {
            switch (key) {
                case 'settings': {
                    router.push('/edit_user_profile')
                    break
                }
                case 'favorite': {
                    router.push('/favorite')
                    break
                }
                case 'interest': {
                    router.push('/interest')
                    break
                }
                case 'logout': {
                    logout()
                }
                case 'test': {
                    router.push('/test')
                    break
                }
            }
        }
        const logout = () => {
            logout_request()
                .then((response) => {
                    if (response.data) {
                        //退出成功
                        store.commit('SET_LOGOUT', true)
                        store.commit('CLEAR_USER_INFO')
                        store.commit('CLEAR_TOKEN')
                        router.push('/login')

                        .then(() => {
        // 清空本地存储的数据
        sessionStorage.clear()
        // 其他操作...
      })
      .catch(error => {
        console.error(error)
      })
                    }
                })
                .catch(() => {
                    store.commit('SET_LOGOUT', true)
                    store.commit('CLEAR_USER_INFO')
                    store.commit('CLEAR_TOKEN')
                })
        }
        const state = reactive({
            collapsed: false,
            rootSubmenuKeys: [],
            openKeys: [],
            selectedKeys: [],
            menuList: [],
            backGroundImg: require('@/assets/background.png'),

        })
        const onOpenChange = (openKeys) => {
            const latestOpenKey = openKeys.find((key) => state.openKeys.indexOf(key) === -1)
            if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                state.openKeys = openKeys
            } else {
                state.openKeys = latestOpenKey ? [latestOpenKey] : []
            }
        }
        const handleClick = ({ key }) => {
            router.push(key)
        }
        return {
            ...toRefs(state),
            systemTitle: process.env.VUE_APP_TITLE,
            logout,
            onMenuClick,
            onOpenChange,
            homep,
            handleClick,
            dom_map,
            $route,
            router,
        }
    },
})
</script>
<style>
#components-layout-demo-side .logo {
    height: 32px;
    margin: 16px;
    background: rgba(255, 255, 255, 0.3);
}
/*分割线*/
.custom-divider {
    border: none;
    height: 1px;
    background-color: #BBBBBB;
}
</style>